<template>
  <view>
    <!-- 轮播图组件 -->
    <!-- <home-banner :banners="banners" @bannerItemClick="handleBannerItemClick"></home-banner> -->
    <!-- 推荐栏组件 -->
    <!-- <home-recommends :recommends="recommends"></home-recommends> -->
    <!-- 热门组件 -->
    <!-- <home-popular></home-popular> -->
		<!-- 选项卡组件 -->
		<tab-control :titles="['流行', '新款', '精选']" @tabItemClick="handleTabItemClick"></tab-control>
		<!-- 九宫格组件 -->
		<uni-grid :column="2" border-color="#fff8198" :show-border="false" :square="false">
			<template v-for="(item, index) in goodsList[types[typesIndex]].list" :key="index">
				<uni-grid-item>
					<grid-view-item :itemInfo="item"></grid-view-item>
				</uni-grid-item>
			</template>
		</uni-grid>
  </view>
</template>

<script setup>
  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
  import { types, useHomeStore } from '@/store/home/home.js';
  import { storeToRefs } from 'pinia';
	import { computed, ref } from 'vue';
  import homeBanner from './cpns/home-banner.vue';
  import homeRecommends from './cpns/home-recommends.vue';
  import homePopular from './cpns/home-popular.vue';

  const homeStore = useHomeStore();
  const { banners, recommends, goodsList } = storeToRefs(homeStore);
	
	let typesIndex = ref(0)
	let pageSize = ref(0)
	
	// 获取九宫格组件数据
	function getHomeData (pageSize) {
		homeStore.fetchHomeData(types[typesIndex.value], pageSize);
	}
	
  onLoad(() => {
    homeStore.fetchHomeMultidata();
		getHomeData(pageSize.value)
  });
	
	// 监听用户下拉到底部时访问接口返回新的数据
	onReachBottom(() => {
		getHomeData(++pageSize.value);
	})

	// 轮播图点击事件
  function handleBannerItemClick(link) {
    uni.navigateTo({
      url: `/pages/webview/webview?link=${link}`,
    });
  }
	
	// tab-control点击事件
	function handleTabItemClick(index) {
		typesIndex.value = index
		console.log(typesIndex.value);
		getHomeData(pageSize)
	}
</script>

<style></style>
